<template>
  <div class="echart" id="coldHotElectric"></div>
</template>
<script>
import echart from 'echarts'
import { getPowerChartData } from '@/api/scada'

export default {
  name: "echart",
  props: {},
  data() {
    return {

      option: {
        textStyle: {
          fontWeight: 400,
          fontSize: 14,
          color: '#666'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: '#666'
          },
            icon: 'circle',
          selectedMode: true,
          right:150,
            top:6,
        },
        grid: {
          left: 20,
          right: 20,
          top: 50,
            bottom:20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#E8E8E8",
              width: 1
            }
          }

        },

        yAxis:
          [
            {
              name: '单位(kW)',
              nameTextStyle: {
                fontWeight: 400,
                fontSize: 14,
                  padding:[0 ,0 ,10 ,0],
                color: '#666',
              },
              type: 'value',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: "#E8E8E8"
                }
              },
            },
            {
              name: '单位(m³)',
              nameTextStyle: {
                  padding:[0 ,0 ,10 ,0],
                fontWeight: 400,
                fontSize: 14,
                color: '#666'
              },
              type: 'value',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show:false,
                lineStyle: {
                  color: "#E8E8E8"
                }
              },
            },
          ],
        series: [
          {
            name: '发电功率',
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
              color: "#FF9A00"
            },
            smooth: true
          },
          {
            name: '供热功率',
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
              color: "#FC807E"
            },
            smooth: true
          },
          {
            name: '供冷功率',
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
              color: "#46A4F7"
            },
            smooth: true
          },
          {
            name: '天然气进气量',
            yAxisIndex:1,
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
              color: "#92D66E"
            },
            smooth: true
          },
        ]
      }

    };
  },

  mounted() {
    let echartBox = document.querySelector('#coldHotElectric')
    let myCahrt = echart.init(echartBox)
      getPowerChartData().then(res=>{
          let arr = []
          if(res.code===200) {
              arr = res.result;
          }
          this.option.xAxis.data = arr.map(item=>item.time)
          this.option.series[0].data = arr.map(item=>+item.fdgl)
          this.option.series[1].data = arr.map(item=>+item.grgl)
          this.option.series[2].data = arr.map(item=>+item.glgl)
          this.option.series[3].data = arr.map(item=>+item.trqjql)
          myCahrt.setOption(this.option, true);
      })
  },
  computed: {},
  created() {
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
  .echart {
    height: 240px;
  }
</style>
